<template>
  <div class="mt20">
    <el-card class="box-card" :body-style="{ padding: '18px 0px 5px', boxSizing: 'border-box' }">
      <el-row class="title">
        <!-- 头部功能区 -->
        <el-col :lg="3" class="tac module-title ml10">
          <el-select v-model="queryOderInfo.typa" @change="searchOder" placeholder="请选择工单类型">
            <el-option v-for="item in selectOderTypeName" :key="item.value" :label="item.label" :value="item.value"> </el-option>
          </el-select>
        </el-col>
        <el-col :lg="3" class="tac module-title ml20">
          <el-input v-model.trim="queryOderInfo.order_id" @input="searchOder" clearable placeholder="请输入需要查询的订单id"></el-input>
        </el-col>
        <el-col :lg="3" class="tac module-title ml20">
          <el-input v-model.trim="queryOderInfo.workid" clearable @input="searchOder" placeholder="请输入需要查询的工单id"></el-input>
        </el-col>
        <el-col :lg="1" class="tac module-title ml20">
          <el-button type="primary" plain size="medium" @click="resetOder">重置</el-button>
        </el-col>
        <el-col :lg="2" class="tal module-title ml20">
          <el-button type="primary" plain size="medium" icon="el-icon-plus" @click="newOder">新建工单</el-button>
        </el-col>
      </el-row>
      <!-- 表格区 -->
      <el-table :data="tableData" :height="tableHeight" v-loading="loading">
        <el-table-column label="工单id" prop="id" width="80"> </el-table-column>
        <el-table-column label="工单名称" prop="typeName"> </el-table-column>
        <el-table-column label="充值订单号" prop="order_id">
          <template slot-scope="scope">
            <div>
              {{ scope.row.order_id ? scope.row.order_id : '' }}
            </div>
          </template>
        </el-table-column>
        <el-table-column label="玩家平台用户名" prop="playername"> </el-table-column>
        <el-table-column label="修改充值订单状态为" prop="update_order_status">
          <template slot-scope="scope">
            <div>
              {{ scope.row.update_order_status == 1 ? '成功' : scope.row.update_order_status == 0 ? '失败' : '' }}
            </div>
          </template>
        </el-table-column>
        <el-table-column label="更变后玩家姓名" prop="realname"> </el-table-column>
        <el-table-column label="更变后身份证号" width="170" prop="idcard">
          <template slot-scope="scope">
            <div>
              {{ scope.row.idcard | formatIdCard }}
            </div>
          </template>
        </el-table-column>
        <el-table-column label="转出平台账户" prop="from_user_login_name">
          <template slot-scope="scope">
            <div>
              {{ scope.row.from_user_login_name == 'None' ? '' : scope.row.from_user_login_name }}
            </div>
          </template>
        </el-table-column>
        <el-table-column label="转入平台账户" prop="to_user_login_name">
          <template slot-scope="scope">
            <div>
              {{ scope.row.to_user_login_name == 'None' ? '' : scope.row.to_user_login_name }}
            </div>
          </template>
        </el-table-column>
        <el-table-column label="平台币兑换-游戏名称" prop="game_name">
          <template slot-scope="scope">
            <div>
              {{ scope.row.game_name == 'None' ? '' : scope.row.game_name }}
            </div>
          </template>
        </el-table-column>
        <el-table-column label="平台币兑换-服务器名称" prop="server_name">
          <template slot-scope="scope">
            <div>
              {{ scope.row.server_name == 'None' ? '' : scope.row.server_name }}
            </div>
          </template>
        </el-table-column>
        <el-table-column label="平台币兑换-游戏角色名称" prop="role_name" width="110">
          <template slot-scope="scope">
            <div>
              {{ scope.row.role_name == 'None' ? '' : scope.row.role_name }}
            </div>
          </template>
        </el-table-column>
        <el-table-column label="更变的平台币" prop="update_coin">
          <template slot-scope="scope">
            <div>
              {{ scope.row.update_coin == 0 ? '' : scope.row.update_coin }}
            </div>
          </template>
        </el-table-column>
        <el-table-column label="凭证" prop="proof">
          <template slot-scope="scope">
            <ul class="img-container">
              <li v-for="item in scope.row.picArr" :key="item" class="img-list">
                <img :src="item" @click="preViewPic(item)" />
              </li>
            </ul>
          </template>
        </el-table-column>
        <el-table-column label="要领取福利的时间" width="100" prop="welfare_rebate_date">
          <template slot-scope="scope">
            <div>
              {{ scope.row.welfare_rebate_date == 'None' ? '' : scope.row.welfare_rebate_date }}
            </div>
          </template>
        </el-table-column>
        <el-table-column label="是否领取全部返利" prop="get_all_rebate">
          <template slot-scope="scope">
            <div>
              {{ scope.row.get_all_rebate == 'True' ? '是' : scope.row.typa == '9' ? '否' : '' }}
            </div>
          </template>
        </el-table-column>
        <el-table-column label="操作人" prop="operater"> </el-table-column>
        <el-table-column label="审核人" prop="reviewer"> </el-table-column>
        <el-table-column label="操作" prop="operation" width="220">
          <template slot-scope="scope">
            <!-- 未审核 -->
            <div v-if="scope.row.state == 1">
              <div v-if="permission.review">
                <el-button type="primary" plain @click="pass(scope.row)">通过</el-button>
                <el-button type="danger" plain @click="reject(scope.row, 1)" :loading="scope.row.btnLoading">驳回</el-button>
              </div>
              <div v-else style="color: #f39c12">待审核</div>
            </div>
            <!-- 已通过 -->
            <div v-else-if="scope.row.state == 2">
              <span style="color: green">已通过</span>
            </div>
            <!-- 已驳回 -->
            <div v-else-if="scope.row.state == 3">
              <span style="color: #f39c12">已驳回</span>
            </div>
            <!-- 处理异常 -->
            <div v-else>
              <span style="color: #f39c12">处理异常({{ scope.row.failed_info }})</span>
            </div>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        class="tac"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page.sync="currentPage2"
        :page-sizes="[10, 20, 30, 50]"
        :page-size="10"
        layout="sizes, prev, pager, next"
        :total="oderCount"
      >
      </el-pagination>
    </el-card>
    <!-- 新建工单 -->
    <el-dialog
      :modal-append-to-body="false"
      :top="userAgent ? '60px' : '10vh'"
      :title="'新建工单 - ' + selectOderType"
      :visible.sync="newOderDialog"
      width="1000px"
    >
      <div class="wid-100 pt20 pb20">
        <el-form class="wid-100" label-position="right" :label-width="formLabelWidth">
          <el-form-item label="请选择工单类型：" class="wid-100">
            <el-select v-model="selectOderType" placeholder="请选择工单类型" @change="oderTypeChange">
              <el-option v-for="item in oderType" :key="item.value" :label="item.label" :value="item.value"> </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="请输入申请工单操作的玩家平台用户名：" class="wid-75">
            <el-input v-model.trim="addOder.playername" clearable></el-input>
          </el-form-item>
          <!-- 资料修改 -->
          <el-form-item label="请输入修改后的玩家姓名：" class="wid-75" v-if="selectOderType == '资料修改'">
            <el-input v-model.trim="addOder.realname" clearable></el-input>
          </el-form-item>
          <el-form-item label="请输入修改后的玩家身份证号：" class="wid-75" v-if="selectOderType == '资料修改'">
            <el-input v-model.trim="addOder.idcard" clearable></el-input>
          </el-form-item>
          <el-form-item label="已输入：" class="wid-75" v-if="selectOderType == '资料修改'">
            <strong class="ft18">{{ addOder.idcard ? addOder.idcard.length : 0 }}</strong>
            位身份证号
          </el-form-item>
          <!-- 平台币转移 -->
          <el-form-item label="请输入要转出的平台币用户名：" class="wid-75" v-if="selectOderType == '平台币转移'">
            <el-input v-model.trim="addOder.from_user_login_name" clearable></el-input>
          </el-form-item>
          <el-form-item label="请输入要转入的平台币用户名：" class="wid-75" v-if="selectOderType == '平台币转移'">
            <el-input v-model.trim="addOder.to_user_login_name" clearable></el-input>
          </el-form-item>
          <!-- 平台币兑换 -->
          <el-form-item label="请选择游戏名称：" class="wid-75" v-if="selectOderType == '平台币兑换'">
            <el-select v-model="game" placeholder="请选择游戏名称" filterable :disabled="!addOder.playername">
              <el-option v-for="item in gameList" :key="item.value" :label="item.label" :value="item.value"> </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="请选择游戏区服：" class="wid-75" v-if="selectOderType == '平台币兑换'">
            <el-select v-model="server_s" placeholder="请选择游戏区服" filterable :disabled="!game">
              <el-option v-for="item in serverList" :key="item.value" :label="item.label" :value="item.value"> </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="请选择角色名称：" class="wid-75" v-if="selectOderType == '平台币兑换'">
            <el-select v-model="role_playid" placeholder="请选择角色名称" :disabled="!server_s">
              <el-option v-for="item in roleNameList" :key="item.value" :label="item.label" :value="item.value"> </el-option>
            </el-select>
          </el-form-item>
          <!-- 平台币兑换 和 平台币转移 -->
          <el-form-item label="请输入变更的平台币数量：" class="wid-75" v-if="selectOderType == '平台币转移' || selectOderType == '平台币兑换'">
            <el-input v-model.trim="addOder.coin" clearable></el-input>
          </el-form-item>
          <!-- 充值补单 和 充值订单状态修改 -->
          <el-form-item label="请输入充值订单号：" class="wid-75" v-if="selectOderType == '充值补单' || selectOderType == '充值订单状态修改'">
            <el-input v-model.trim="addOder.order_id" clearable></el-input>
            <!-- <el-button @click="queryOder(addOder.order_id)">查询订单</el-button>
            tips：请先查询订单是否有效，否则无法正常新建工单 -->
          </el-form-item>
          <el-form-item label="tips：" class="wid-75" v-if="selectOderType == '充值补单' || selectOderType == '充值订单状态修改'">
            <el-button @click="queryOder(addOder.order_id)">查询订单</el-button>
            请先查询订单是否有效，否则无法正常新建工单
          </el-form-item>
          <!-- 上传 -->
          <el-form-item label="上传凭证(最多两张)：" class="wid-75" v-if="selectOderType == '充值补单' || selectOderType == '充值订单状态修改'">
            <el-upload
              action="actionsUrl"
              list-type="picture-card"
              :http-request="uploadFile"
              :before-upload="beforeUpload"
              accept=".pdf,.png,.jpg,.jpeg"
              multiple
              :limit="2"
            >
              <i slot="default" class="el-icon-plus"></i>
              <div slot="file" slot-scope="{ file }">
                <img class="el-upload-list__item-thumbnail" :src="file.url" alt="" />
                <span class="el-upload-list__item-actions">
                  <span class="el-upload-list__item-preview" @click="handlePictureCardPreview(file)">
                    <i class="el-icon-zoom-in"></i>
                  </span>
                  <!--  <span
                  v-if="!disabled"
                  class="el-upload-list__item-delete"
                  @click="handleRemove(file)"
                >
                  <i class="el-icon-delete"></i>
                </span> -->
                </span>
              </div>
            </el-upload>
          </el-form-item>
          <!-- 状态修改 -->
          <el-form-item label="充值订单状态修改：" class="wid-75" v-if="selectOderType == '充值订单状态修改'">
            <el-select v-model="addOder.update_order_status" placeholder="请将状态修改为成功或者失败">
              <el-option v-for="item in oderStatus" :key="item.value" :label="item.label" :value="item.value"> </el-option>
            </el-select>
          </el-form-item>
          <!-- 福利中心领取 -->
          <el-form-item label="领取返利日期：" class="wid-75" v-if="selectOderType == '福利中心返利领取'" v-show="!select_all_rebate">
            <el-date-picker v-model="addOder.welfare_rebate_date" type="date" placeholder="选择日期" @change="getData"> </el-date-picker>
          </el-form-item>
          <el-form-item label="是否领取全部返利：" class="wid-75" v-if="selectOderType == '福利中心返利领取'">
            <el-switch v-model="select_all_rebate" active-color="#13ce66" inactive-color="#ff4949" active-text="是" inactive-text="否"> </el-switch>
          </el-form-item>
        </el-form>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button size="small" @click="newOderDialog = false">取 消</el-button>
        <el-button type="primary" size="small" @click="confirmnNewOder" :loading="confirmnNewOderLoading">确 定</el-button>
      </span>
    </el-dialog>
    <!-- 预览 -->
    <el-dialog :visible.sync="dialogVisible" width="60vw">
      <img width="100%" :src="dialogImageUrl" alt="" />
    </el-dialog>
    <!-- 通过弹窗 -->
    <el-dialog
      :modal-append-to-body="false"
      :top="userAgent ? '60px' : '15vh'"
      :title="'确认是否通过该 - ' + passSelectOderType"
      :visible.sync="passDialog"
      width="1000px"
    >
      <div class="wid-100 pt20 pb20">
        <el-form class="wid-100" inline label-position="right" label-width="220px">
          <el-form-item label="申请工单操作的平台用户名：">
            <el-input v-model="passOderInfo.playername" disabled></el-input>
          </el-form-item>
          <el-form-item label="玩家订单id：" class="" v-if="passOderInfo.typeName == '充值补单' || passOderInfo.typeName == '充值订单状态修改'">
            <el-input v-model="passOderInfo.order_id" disabled></el-input>
          </el-form-item>
          <el-form-item label="修改订单状态为：" class="" v-if="passOderInfo.typeName == '充值订单状态修改'">
            <el-input :value="passOderInfo.update_order_status === '1' ? '成功' : passOderInfo.update_order_status === '0' ? '失败' : ''" disabled></el-input>
          </el-form-item>
          <el-form-item label="凭证：" class="" v-if="passOderInfo.typeName == '充值补单' || passOderInfo.typeName == '充值订单状态修改'">
            <ul class="img-container">
              <li v-for="item in passOderInfo.picArr" :key="item" class="img-list">
                <img :src="item" alt @click="preViewPic(item)" />
              </li>
            </ul>
          </el-form-item>

          <!-- 资料修改 -->
          <el-form-item label="修改后的玩家姓名：" class="" v-if="passOderInfo.typeName == '资料修改'">
            <el-input :value="passOderInfo.realname" disabled></el-input>
          </el-form-item>
          <el-form-item label="修改后的玩家身份证号：" class="" v-if="passOderInfo.typeName == '资料修改'">
            <el-input :value="passOderInfo.idcard" disabled></el-input>
          </el-form-item>
          <!-- 平台币转移 -->
          <el-form-item label="转出平台账户：" class="" v-if="passOderInfo.typeName == '平台币转移'">
            <el-input :value="passOderInfo.from_user_login_name" disabled></el-input>
          </el-form-item>
          <el-form-item label="转入平台账户：" class="" v-if="passOderInfo.typeName == '平台币转移'">
            <el-input :value="passOderInfo.to_user_login_name" disabled></el-input>
          </el-form-item>
          <!-- 平台币兑换 -->
          <el-form-item label="游戏名称：" class="" v-if="passOderInfo.typeName == '平台币兑换'">
            <el-input :value="passOderInfo.game_name" disabled></el-input>
          </el-form-item>
          <el-form-item label="服务器名称：" class="" v-if="passOderInfo.typeName == '平台币兑换'">
            <el-input :value="passOderInfo.server_name" disabled></el-input>
          </el-form-item>
          <el-form-item label="游戏角色名称：" class="" v-if="passOderInfo.typeName == '平台币兑换'">
            <el-input :value="passOderInfo.role_name" disabled></el-input>
          </el-form-item>
          <el-form-item label="更变的平台币：" class="" v-if="passOderInfo.typeName == '平台币转移' || passOderInfo.typeName == '平台币兑换'">
            <el-input :value="passOderInfo.update_coin" disabled></el-input>
          </el-form-item>
          <!-- 福利中心领取 -->
          <el-form-item label="申领福利时间：" class="" v-if="passOderInfo.typeName == '福利中心返利领取' && passOderInfo.welfare_rebate_date != 'None'">
            <el-input :value="passOderInfo.welfare_rebate_date" disabled></el-input>
          </el-form-item>
        </el-form>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button size="small" @click="passDialog = false">取 消</el-button>
        <el-button type="primary" @click="passConfirm" size="small" :loading="btnLoading">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
export default {
  data() {
    return {
      clearFlag: false,
      confirmnNewOderLoading: false,
      // 通过信息
      passOderInfo: {},
      // 平台币兑换 - 游戏列表
      game: '',
      gameList: [], // 游戏列表
      server_s: '',
      serverList: [], // 服务器列表
      role_playid: '',
      roleNameList: [], // 角色列表
      oderStatus: [
        { value: 0, label: '失败' },
        { value: 1, label: '成功' },
      ], // 订单状态
      // flag 与 弹窗
      newOderDialog: false,
      passDialog: false,
      // 查询
      queryOderInfo: {
        workid: '', // 工单id(非必填)
        order_id: '', // 订单号(非必填)
        typa: '', // 工单类型id(非必填)
        page: 1, // 第一页默认第一(非必填)
        per_page: 10, // 每页数量默认10(非必填)
      },
      queryOderFlag: false,
      tableData: [], // 表格数据
      oderCount: 0, // 表格数据条数
      oderPages: 0, // 表格数据页数
      currentPage2: 1, // 当前页
      tmpList: [], // 零时储存的所有list
      query: {
        type: '',
        info: '',
      },
      // 新增工单列表
      addOder: {
        typeid: '', // 工单类型id
        order_id: '', // 订单id
        playername: '', // 平台用户名称
        update_order_status: '', // 修改的补单状态为成功或者失败
        from_user_login_name: '', // 转出玩家用户名
        to_user_login_name: '', // 转至玩家用户名
        coin: '', // 转移的平台币数量
        realname: '', // 最终用户名
        idcard: '', // 玩家修改的身份证号
        game_id: '', // 游戏名称id
        // game_name: "", // 游戏名称
        server_id: '', // 服务器名称id
        // server_name: "", // 服务器名称
        role_name: '', // 查询过后的游戏角色名称
        role_playid: '', // 角色id
        pic1: '', // 上传图片
        pic2: '',
        welfare_rebate_date: new Date().toISOString().substr(0, 10), // 福利中心领取选定时间
        get_all_rebate: 0, // 是否领取全部奖励
      },
      querySelectOderTypeName: '',
      selectOderTypeName: [], // 筛选工单类型
      baseSelectOderTypeName: [{ value: '', label: '所有类型' }],
      addOderTypeName: [],
      addOderTypeID: [],
      passSelectOderType: '',
      queryAnswer: '', // 查询的订单号
      queryIdCard: '', // 查询的身份证
      // 通过
      passConfirmInfo: {},
      roleFlag: false, // 平台币兑换 查询的角色是否为空角色
      select_all_rebate: false, // 是否领取全部奖励
      files: [], // 上传的文件列表
      closeFlag: false, // 点击新建工单的关闭按钮
      // 权限
      permission: {
        new: false, // 新建
        review: false, // 审核
      },
      //  -------------------------
      oderOptions: [], // select筛选框
      btnLoading: false,
      loading: false, // 表格loading
      oderType: [], // oder 类型
      selectOderType: '', // 勾选的 oder value
      formLabelWidth: '400px',
      //  -----------  上传  --------------
      dialogImageUrl: '',
      dialogVisible: false,
      disabled: false,
      constractFile: [],
      maxUploadNum: 2, // 最大上传个数
      fileList: [], // 上传列表
      imgList: [], // 图片回显地址列表
    };
  },
  created() {
    this.getState();
    this.checkUserPower();
    this.getCurrentScreen();
  },
  methods: {
    // ----------------------------- 查询工单 ---------------------
    // 查询工单类型
    searchOder() {
      this.queryOderInfo.page = 1;
      this.getOderListData(this.queryOderInfo);
    },
    // 重置数据列表
    resetOder() {
      this.queryOderInfo.workid = '';
      this.queryOderInfo.order_id = '';
      this.queryOderInfo.typa = '';
      this.queryOderInfo.page = 1;
      this.queryOderInfo.per_page = 10;
      this.getOderListData(this.queryOderInfo);
    },
    // ----------------------------- 新建工单 ---------------------
    getData(e) {
      this.addOder.welfare_rebate_date = new Date(e).toLocaleString().substr(0, 10);
    },
    // 选择对应的工单类型
    oderTypeChange(e) {
      let item = this.oderType.find(item => {
        if (item.value == e) return item;
      });
      this.selectOderType = item.label;
    },
    // 确认新建工单
    confirmnNewOder() {
      this.addOder.game_id = this.game;
      this.addOder.server_id = this.server_s;
      let name_result = this.roleNameList.filter(item => item.value == this.role_playid);
      this.addOder.role_name = name_result[0].label;
      this.addOder.role_playid = this.role_playid + '';
      this.addOder.pic1 = this.imgList[0] || '';
      this.addOder.pic2 = this.imgList[1] || '';
      this.addOder.get_all_rebate = this.select_all_rebate ? 1 : 0;

      this.addOderTypeName.filter((item, index) => {
        if (item == this.selectOderType) {
          this.addOder.typeid = this.addOderTypeID[index];
          return index;
        }
      });
      // 检查输入内容
      if (!this.checkInputText()) return;
      // 删除不必要的字段
      this.deleteVoidParams();
      // 新建
      this.confirmnNewOderLoading = true;
      this.$api.newOder(this.addOder).then(res => {
        this.confirmnNewOderLoading = false;
        if (res.code == '101') {
          this.clearOderInfo();
          this.$message.success(`新建 ${this.selectOderType}工单 成功`);
        } else {
          this.clearOderInfo();
          this.$message.error(`新建 ${this.selectOderType}工单 失败`);
        }
      });
    },
    newOder() {
      this.newOderDialog = true;
      this.getGameList();
    },
    // 查询订单
    queryOder(queryOrderId) {
      this.$api.queryOder({ order_id: queryOrderId }).then(res => {
        if (res.code == 101 && res.data.length > 0) {
          this.queryAnswer = '合法订单';
          this.queryOderFlag = true;
          this.$message.success('合法订单');
        } else {
          this.queryAnswer = '失效订单';
          this.$message.error('失效订单');
          this.queryOderFlag = false;
        }
      });
    },
    // 游戏列表
    getGameList() {
      this.$api.gameList().then(res => {
        if (res.code == '0') {
          //增加text一项是游戏名称和缩写组成的
          res.data.forEach(function (obj, i) {
            obj.text = obj.name + '(' + obj.interface_name + ')';
          });
          this.gameList = res.data.map(item => {
            return {
              label: `${item.name}(${item.interface_name})`,
              value: item.id,
            };
          });
          this.addOder.role_playid = '';
        }
      });
    },
    // 服务器列表
    getServerList() {
      let queryObj = { game_id: this.game, limit: '9999', server_id: '' };
      this.$api.gameServer(queryObj).then(res => {
        if (res.code == '0') {
          this.serverList = res.data.map(item => {
            return { value: item.id, label: item.server_name };
          });

          if (this.serverList.length == 0) {
            this.$message.warning('当前游戏没有区服');
            this.addOder.role_playid = '';
          } else {
            this.addOder.role_playid = '';
            this.$message.success('请下拉选择区服');
          }
        }
      });
    },
    // 角色列表
    getRoleName() {
      let queryObj = {
        game_id: this.game,
        server_id: this.server_s,
        login_name: this.addOder.playername + '',
      };
      this.$api.getRoleName(queryObj).then(res => {
        if (res.code == 101) {
          this.roleNameList = res.data.map(item => {
            return { value: item.role_playid, label: item.role_name };
          });
          this.roleFlag = false;
          this.$message.success('请下拉选择角色');
        } else {
          this.$message.warning(res.msg);
          this.roleFlag = true;
        }
      });
    },
    // 清空 // 清除选服 // 状态还原
    clearOderInfo() {
      this.getOderListData();
      this.newOderDialog = false;
      this.clearFlag = true;
      this.addOder = {};
      this.passSelectOderType = '';
      this.queryIdCard = '';
      this.queryAnswer = '';
      this.selectOderType = '';
      this.serverList = [];
      this.roleNameList = [];
      this.game = '';
      this.server_s = '';
      this.role_playid = '';
      this.addOder.welfare_rebate_date = new Date().toISOString().substr(0, 10);
      this.select_all_rebate = false;
    }, // 提交时删除不必要的字段
    deleteVoidParams() {
      if (!(this.selectOderType == '充值补单' || this.selectOderType == '充值订单状态修改')) {
        delete this.addOder.order_id;
        delete this.addOder.pic1;
        delete this.addOder.pic2;
      }
      if (this.selectOderType != '资料修改') {
        delete this.addOder.realname;
        delete this.addOder.idcard;
      }
      if (this.selectOderType != '平台币兑换') {
        delete this.addOder.game_id;
        delete this.addOder.server_id;
        delete this.addOder.role_playid;
        delete this.addOder.role_name;
      }
      if (this.selectOderType != '平台币转移') {
        delete this.addOder.from_user_login_name;
        delete this.addOder.to_user_login_name;
      }
      if (this.selectOderType != '平台币转移' && !(this.selectOderType == '平台币兑换')) {
        delete this.addOder.coin;
      }
      if (this.selectOderType != '福利中心返利领取') {
        delete this.addOder.welfare_rebate_date;
        delete this.addOder.get_all_rebate;
      }
      if (this.selectOderType == '福利中心返利领取' && this.addOder.get_all_rebate) {
        delete this.addOder.welfare_rebate_date;
      }
      if (this.selectOderType == '充值订单状态修改') {
        this.addOder.update_order_status = this.addOder.update_order_status == 0 ? 0 : 1;
      } else {
        delete this.addOder.update_order_status;
      }
    },
    // 提交时检测文本框输入内容是否为空
    checkInputText() {
      if (this.addOder.typeid == '' || this.addOder.typeid == undefined) {
        this.$message.warning('工单类型不能为空');
        return false;
      }
      if (this.addOder.playername == '' || this.addOder.playername == undefined) {
        this.$message.warning('玩家平台用户名不能为空');
        return false;
      }
      if (
        (this.selectOderType == '充值补单' || this.selectOderType == '充值订单状态修改') &&
        (this.addOder.order_id == '' || this.addOder.order_id == undefined)
      ) {
        this.$message.warning('充值订单号不能为空');
        return false;
      }
      if ((this.selectOderType == '充值补单' || this.selectOderType == '充值订单状态修改') && (this.addOder.pic1 == '' || this.addOder.pic1 == undefined)) {
        this.$message.warning('请至少上传一张充值凭证');
        return false;
      }
      if (this.selectOderType == '充值订单状态修改' && this.addOder.update_order_status === '') {
        this.$message.warning('请选择该订单修改为成功或者失败');
        return false;
      }
      if ((this.selectOderType == '充值补单' || this.selectOderType == '充值订单状态修改') && !this.queryOderFlag) {
        this.$message.warning('该充值订单无效，请重新确认订单号');
        return false;
      }
      if (this.selectOderType == '平台币转移' && (this.addOder.from_user_login_name == '' || this.addOder.from_user_login_name == undefined)) {
        this.$message.warning('要转出的平台币用户名不能为空');
        return false;
      }
      if (this.selectOderType == '平台币转移' && (this.addOder.to_user_login_name == '' || this.addOder.to_user_login_name == undefined)) {
        this.$message.warning('要转入的平台币用户名不能为空');
        return false;
      }
      if (this.selectOderType == '平台币转移' && (this.addOder.coin == '' || this.addOder.coin == undefined)) {
        this.$message.warning('需要转移的平台币数量不能为空');
        return false;
      }
      if (this.selectOderType == '平台币兑换' && (this.addOder.coin == '' || this.addOder.coin == undefined)) {
        this.$message.warning('需要兑换的平台币数量不能为空');
        return false;
      }
      if (this.selectOderType == '平台币兑换' && this.addOder.game_id == '') {
        this.$message.warning('请重新选择游戏名称');
        return false;
      }
      if (this.selectOderType == '平台币兑换' && this.addOder.server_id == '') {
        this.$message.warning('请重新选择游戏名称');
        return false;
      }
      /* if (this.selectOderType == '平台币兑换' && this.addOder.role_playid == '') {
        this.$message.warning('请重新选择游戏角色');
        return false;
      } */
      // 资料修改
      if (
        this.selectOderType == '资料修改' &&
        (this.addOder.idcard == '' || this.addOder.idcard == undefined) &&
        (this.addOder.realname == '' || this.addOder.realname == undefined)
      ) {
        this.$message.warning('请输入需要修改的玩家用户名或者身份证');
        return false;
      }
      if (this.selectOderType == '资料修改' && (this.addOder.realname == '' || this.addOder.realname == undefined) && this.queryIdCard == '无效') {
        this.$message.warning('请输入有效的身份证');
        return false;
      }
      return true;
    },
    // ----------------------------- 审核 -------------------------
    // 检查登录用户的工单新建与审核权限
    checkUserPower() {
      this.$api.checkPower().then(res => {
        if (res.code == 101) {
          this.permission.new = res.data.has_work_order_new_permission;
          this.permission.review = res.data.has_work_order_review_permission;
        }
      });
    },
    // 通过
    passConfirm() {
      this.btnLoading = true;
      //  根据不同的通过类型，调用不同的接口
      if (this.passSelectOderType == '充值补单' || this.passSelectOderType == '充值订单状态修改') {
        let passInfo = {
          typa: this.passConfirmInfo.typa,
          workid: this.passConfirmInfo.workid,
        };
        this.$api.updateOder(passInfo).then(res => {
          this.init();
          if (res.code == 101) {
            this.passConfirmInfo = {};
            this.getOderListData();
            this.$message.success(`${this.passSelectOderType} 通过成功`);
          } else if (this.resCodeTable.hasOwnProperty(res.code)) {
            this.$message.warning(this.resCodeTable[res.code]);
            this.getOderListData();
          }
        });
      }
      if (this.passSelectOderType == '资料修改') {
        this.$api.updateUserInfo({ workid: this.passConfirmInfo.workid }).then(res => {
          this.init();
          if (res.code == 101) {
            this.getOderListData();
            this.$message.success(`${this.passSelectOderType} 通过成功`);
          } else if (this.resCodeTable.hasOwnProperty(res.code)) {
            this.$message.warning(this.resCodeTable[res.code]);
            this.getOderListData();
          }
        });
      }
      if (this.passSelectOderType == '平台币转移') {
        this.$api.updateCoinMove(this.passConfirmInfo).then(res => {
          this.init();
          if (res.code == 101) {
            this.getOderListData();
            this.$message.success(`${this.passSelectOderType} 通过成功`);
          } else if (this.resCodeTable.hasOwnProperty(res.code)) {
            this.$message.warning(this.resCodeTable[res.code]);
            this.getOderListData();
          }
        });
      }
      if (this.passSelectOderType == '平台币兑换') {
        this.$api.updateCoinExchange(this.passConfirmInfo).then(res => {
          this.init();
          if (res.code == 101) {
            this.getOderListData();
            this.$message.success(`${this.passSelectOderType} 通过成功`);
          } else if (this.resCodeTable.hasOwnProperty(res.code)) {
            this.$message.warning(this.resCodeTable[res.code]);
            this.getOderListData();
          }
        });
      }
      if (this.passSelectOderType == '短信验证码超标') {
        this.$api.updateVerificationCode({ workid: this.passConfirmInfo.workid }).then(res => {
          this.init();
          if (res.code == 101) {
            this.getOderListData();
            this.$message.success(`${this.passSelectOderType} 通过成功`);
          } else if (this.resCodeTable.hasOwnProperty(res.code)) {
            this.$message.warning(this.resCodeTable[res.code]);
            this.getOderListData();
          }
        });
      }
      if (this.passSelectOderType == '福利中心返利领取') {
        this.$api.updateWelfareRebate({ workid: this.passConfirmInfo.workid }).then(res => {
          this.init();
          if (res.code == 101) {
            this.getOderListData();
            this.$message.success(`${this.passSelectOderType} 通过成功`);
          } else if (this.resCodeTable.hasOwnProperty(res.code)) {
            this.$message.warning(this.resCodeTable[res.code]);
            this.getOderListData();
          }
        });
      }
    },
    init() {
      this.btnLoading = false;
      this.passDialog = false;
    },
    pass(item) {
      // 需要判断不同的工单名称调用不同的接口
      this.passSelectOderType = item.typeName;
      if (item.typeName == '资料修改') {
        this.passConfirmInfo.playername = item.playername;
        this.passConfirmInfo.realname = item.realname;
        this.passConfirmInfo.idcard = item.idcard;
      }
      if (item.typeName == '短信验证码超标') {
        this.passConfirmInfo.playername = item.playername;
      }
      if (item.typeName == '充值订单状态修改' || item.typeName == '充值补单') {
        this.passConfirmInfo.order_id = item.order_id;
      }
      if (item.typeName == '充值订单状态修改') {
        this.passConfirmInfo.typa = '1';
      }
      if (item.typeName == '充值补单') {
        this.passConfirmInfo.typa = '2';
      }
      this.passConfirmInfo.workid = item.id;
      this.passOderInfo = item;
      this.passDialog = true;
    },
    // 驳回
    reject(item, flag) {
      item.btnLoading = true;
      // state 为1 表示待审核 为2 表示已通过 为3 表示已驳回
      let num;
      if (flag == 1) {
        // 改成 驳回
        num = 3;
      } else if (flag == 2) {
        // 改成 待审核
        num = 1;
      }
      this.$api.unPassOder({ workid: item.id, state: num }).then(res => {
        if (res.code == 101) {
          this.getState({}, item);
        }
      });
    },
    // ----------------------------- 获取数据，并处理 -------------------------
    getState(parmas, reject) {
      let query = parmas || {};
      let task = [this.getOderTypeData(), this.getOderListData(query)];
      Promise.all(task).then(res => {
        // 驳回处理操作
        if (reject) {
          reject.btnLoading = false;
          this.$message.success('驳回成功');
        }
      });
    },
    // 获取类型
    getOderTypeData() {
      return new Promise((resolve, reject) => {
        this.$api.orderType().then(res => {
          if (res.code == '101') {
            // 工单类型
            this.oderType = res.data.map(item => {
              return { label: item.name, value: item.id };
            });
            // 定义搜索框数组 （包含所有）
            this.selectOderTypeName = [...this.baseSelectOderTypeName, ...this.oderType];
            this.selectOderType = this.oderType[0].label;
            this.addOderTypeName = res.data.map(item => item.name);
            this.addOderTypeID = res.data.map(item => item.id);
            resolve(res.data);
          }
        });
      });
    },
    // 每页数量变化
    handleSizeChange(val) {
      this.queryOderInfo.per_page = val;
      this.getOderListData(this.queryOderInfo);
    },
    // 当前页
    handleCurrentChange(val) {
      this.queryOderInfo.page = val;
      this.getOderListData(this.queryOderInfo);
    },
    // 获取数据
    getOderListData(parmas) {
      this.loading = true;
      return new Promise((resolve, reject) => {
        this.$api.oderList(parmas).then(res => {
          this.loading = false;
          if (res.code == '101') {
            // if (parmas != {}) this.$message.success("查询成功");
            this.tableData = res.data;
            this.oderPages = res.pages;
            this.oderCount = res.count;
            this.tableData.forEach((item, index) => {
              // 通过TypeID确定typeName
              this.$set(item, 'btnLoading', false);
              this.addOderTypeID.filter((item2, index2) => {
                if (item2 == item.typa) {
                  item.typeName = this.addOderTypeName[index2];
                }
              });
              // 图片合并成一个数组
              if (item.pic1 != 'None') {
                item.picArr = [];
                item.picArr.push(item.pic1);
              }
              if (item.pic2 != 'None') {
                item.picArr.push(item.pic2);
              }
            });
            this.tmpList = this.tableData;
            resolve(res.data);
          } else {
            this.$message.warning(res.msg);
          }
        });
      });
    },
    // ----------------------------- 上传 ---------------------
    handleRemove(file) {
      let index = this.fileList.findIndex(item => {
        return item.uid == file.uid;
      });
      this.fileList.splice(index, 1);
      this.imgList.splice(index, 1);
    },
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    },
    beforeUpload(e) {},
    // 自定义上传事件
    uploadFile(e) {
      this.fileList.push(e.file); //添加进图片数组
      let formFile = new FormData();
      let imgName = 'file';
      formFile.append(imgName, e.file);
      let name = e.file.name;
      let size = e.file.size;
      let types = '.jpg,.jpeg,.png'; //文件格式
      let fileExt = name.substring(name.lastIndexOf('.')).toLowerCase();
      let result = types.indexOf(fileExt);
      if (result < 0) {
        //验证图片格式
        this.$message.warning('图片格式不正确');
        return false;
      }
      if (size > 1 * 1024 * 1024) {
        this.$message.warning('图片大小不能大于1M');
        return false;
      }
      if (this.fileList.length > this.maxUploadNum) {
        this.$message.warning(`图片最多只能上传${this.maxUploadNum}张`);
        this.fileList.pop(); //删除进图片数组
        return false;
      }
      this.$api
        .uploadFile(formFile)
        .then(res => {
          if (res.code == 101) {
            this.upNum = this.fileList.length + 1; //计算图片数量
            this.imgList.push(res.data);
          }
        })
        .catch(err => {});
    },
    // ------------------------  功能  -------------------------------
    preViewPic(url) {
      this.dialogVisible = true;
      this.dialogImageUrl = url;
    },
  },
  watch: {
    game(newVal) {
      if (this.clearFlag) {
        setTimeout(() => {
          this.clearFlag = false;
        }, 0);
        return;
      } else {
        this.game = newVal;
        this.server_s = '';
        this.getServerList();
      }
    },
    server_s() {
      if (this.clearFlag) {
        setTimeout(() => {
          this.clearFlag = false;
        }, 0);
        return;
      } else {
        this.getRoleName();
      }
    },
  },
  filters: {
    formatIdCard(s) {
      let reg = /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/;
      if (reg.test(s.trim()) == true) {
        return s.slice(0, 6) + '******' + s.slice(12);
      }
      return '';
    },
  },
};
</script>
<style lang='stylus' scoped>
body {
}

.img-container {
  padding: 0;
  min-width: 80px;
  height: 80px;
}

.img-list {
  width: 80px;
  height: 80px;
  list-style: none;
  float: left;
  margin-right: 10px;
}

.img-list img {
  width: 100%;
  height: 100%;
}

.img-list img:hover {
  cursor: pointer;
}
</style>
